<template>
  <div class="app-container">
    <aside>Celery Worker 管理</aside>
    <el-divider></el-divider>



                <table class="table table-bordered" style="border-spacing: 0;border-collapse: collapse; border: 1px solid #f4f4f4;width: 100%;">
                        <tr style="font-weight: bold;background-color: #3c8dbc80;">
                          <td>Worker</td>
                          <td>clock</td>
                          <td>pid</td>
                          <td>total</td>
                          <td>进程数</td>
                          <td>查看详情</td>
                          <td>调整进程池数目</td>
                        </tr>
              
                      <tr v-for="k in list" :key="k.id">
                          <td><a :href="'/celery/node/'+k">{{ k }}</a></td>
                          <!--<td><pre>{{ v.broker|json_format }}</pre></td> 
                          <td><pre>{{ v.pool|json_format }}</pre></td>
                          <td><pre>{{ v.rusage|json_format }}</pre></td> -->
                          <td>{{ v.clock }}</td><td>{{ v.pid }}</td>
                          <td>{{ v.total }}</td>
                          <td>{{ v.pool.processes|length }}</td>
                          <td><a :href="'/celery/node/'+k">点击详情</a></td>
                          <td>
                              <div class="form-inline">
                                  <div class="form-group">
                                      <input class="form-control" :name="k">
                                      <button type="submit" class="btn btn-default grow">增加</button>
                                      <button type="submit" class="btn btn-default shrink">减少</button>
                                  </div>
                              </div>
                          </td>
                      </tr>    

                    </table>
                    <aside v-if="list.length == 0">Celery Worker 进程未在线</aside>





  </div>
</template>

<script>
import { fetchList } from '@/api/ansibleui'
import Sortable from 'sortablejs'
import { mapGetters } from 'vuex'

import UserCard from '../profile/components/UserCard'
import Activity from '../profile/components/Activity'
import Timeline from '../profile/components/Timeline'
import Account from '../profile/components/Account'
export default {
  components: { UserCard, Activity, Timeline, Account },
  data() {
    return {
      activeTab: 'activity',
      list: []
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      this.user = {
        name: this.name,
        role: this.roles.join(' | '),
        email: 'admin@test.com',
        avatar: this.avatar
      }
    }
  }
}
  

</script>

<style>
 td {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    border: 1px solid #f4f4f4;
    font-size: smaller;
 }
.sortable-ghost{
  opacity: .8;
  color: #fff!important;
  background: #42b983!important;
}
</style>

<style lang="scss" scoped>

.icon-star{
  margin-right:2px;
}
.drag-handler{
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.show-d{
  margin-top: 15px;
}
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

</style>
